<template>
    <div class="home">
        <HelloWorld :msg='msg' @msg="getMsg"/>
<!--        <HelloWorld :send='send' :msg='msg' @msg="getMsg"/>-->
        <h1>{{send}}</h1>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'Home',
        components: {
            HelloWorld
        },
        data() {
            return {
                msg: '父向子传递',
                send: ''
            }
        },
        // created() {
        //     this.$EventBus.$on('send', (data) => {
        //         console.log(data)
        //         this.send = data
        //     })
        // },
        mounted() {
            this.$EventBus.$on('send', (data) => {
                console.log(data)
                this.send = data
            })
        },
        beforeDestroy() {
            this.$EventBus.$off('send')
        },
        methods: {
            getMsg(data) {
                this.msg = data
            }
        }
    }
</script>
